<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            border: 1px solid lightskyblue;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            border-radius: 100px;
            margin: 40px;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box" onclick="console.log('click')">click</div>
    <div class="box" ondblclick="console.log('dblclick')">ondblclick</div>
    <div class="box" onmousedown="console.log('mousedown')">mousedown</div>
    <div class="box" onmouseenter="console.log('mouseenter')">mouseenter不冒泡</div>
    <div class="box" onmouseleave="console.log('mouseleave')">mouseleave不冒泡</div>
    <div class="box" onmousemove="console.log('mousemove')">mousemove</div>
    <div class="box" onmouseout="console.log('mouseout')">mouseout</div>
    <div class="box" onmouseover="console.log('mouseover')">mouseover</div>
    <div class="box" onmouseup="console.log('mouseup')">mouseup</div>
</div>

<script>
    /*
        鼠标滚轮事件 - 9种   p511
           除了 mouseenter 和 mouseleave，所有鼠标事件都会冒泡，

        click           单击
        dblclick         双击         
        mousedown       按下鼠标任意键
        mouseenter      移动到元素内触发,   不冒泡
        mouseleave      移出元素外触发,     不冒泡
        mousemove       鼠标在元素上移动时反复触发
        mouseout        鼠标光标从一个元素移到另一个元素上时触发
        mouseover       在用户把鼠标光标从元素外部移到元素内部时触发
        mouseup         在用户释放鼠标键时触发
     */


    /*
        触发顺序
        (1) mousedown 
        (2) mouseup 
        (3) click
        (4) mousedown
        (5) mouseup 
        (6) click
        (7) dblclick
     */

    // 测试父亲冒泡
    const father = document.querySelector('.father')

    /*
        father.addEventListener('click', () => console.log('-father-click'))
        father.addEventListener('dblclick', () => console.log('-father-dblclick'))
        father.addEventListener('mousedown', () => console.log('-father-mousedown'))
        father.addEventListener('mouseenter', () => console.log('-father-mouseenter'))
        father.addEventListener('mouseleave', () => console.log('-father-mouseleave'))
        // father.addEventListener('mousemove', () => console.log('-father-mousemove'))
        father.addEventListener('mouseout', () => console.log('-father-mouseout'))
        father.addEventListener('mouseover', () => console.log('-father-mouseover'))
        father.addEventListener('mouseup', () => console.log('-father-mouseup'))
    */


    /*
        1.客户端坐标
        页面鼠标的位置 ,绝对距离
            e.clientX
            e.clientY
     */
    father.addEventListener('click', (e) => {
        console.log('--------------------------')
        console.log('client', e.clientX, e.clientY)
        console.log('page', e.pageX, e.pageY)
        console.log('screen', e.screenX, e.screenY)
    })


    /*
        2.页面坐标  : 一个滚动的页面,可以很长
            e.pageX
            e.pageY
     */

    /*
        3.屏幕坐标: 举例你电脑屏幕的距离
        e.screenX
        e.screenY
     */

    /*
        4.修饰符
        shiftKey、 shift
        ctrlKey、   control 与safari浏览器冲突,会出现右键菜单
        altKey 和  option
         metaKey  command
     */
    father.addEventListener('click', (event) => {
        console.log('----------')
        let keys = new Array();
        if (event.shiftKey) {
            keys.push("shift");
        }
        if (event.ctrlKey) {
            keys.push("ctrl");
        }
        if (event.altKey) {
            keys.push("alt");
        }
        if (event.metaKey) {
            keys.push("meta");
        }
        console.log("Keys: " + keys.join(","));

    })

    /*
        5.相关元素
     */

    /*
        7.额外事件,只有ie支持,不说了
     */

    /*
        8.mousewheel事件
        document.addEventListener("mousewheel", (event) => { console.log(event.wheelDelta);});
     */


</script>
</body>
</html>